<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<style>
		.red {
			background-color: red;
		}
		
		.blue {
			background-color: blue;
		}
	</style>
</head>
<body>
	<!-- 
	 v-* 指令
	 v-bind 指令（自定义属性）
	 v-text
	 v-if
	 -->
	
	<div id="container"><!-- 虚拟DOM（用js生成的dom） -->
		<!-- <header :class="cname">{{ msg }}</header> -->
		<header v-bind:class="cname">{{ msg }}</header>
		<hr>
		<main id="app" v-if="isShow">{{ msg }}, {{isShow}}</main>
		<hr>
		<button v-on:click="isShow = !isShow">切换显示</button>
		<hr>
		<!-- <footer>{{ msg }}</footer> -->
		<footer v-text="msg"></footer>
	</div>
	
	
	<script src="./vue.js"></script>
	<script>
		
		const app = new Vue({
			el: "#container", // el将vue的实例与模板html进行关联，可以解析 {{}}
			// 现在数据和 DOM 已经被建立了关联，所有东西(data)都是[响应式]的
			data: { // 数据状态
				msg: "Hello Vue!",
				cname: 'red',
				isShow: true
			}
		})
		
		// getter 
		// app.msg
		// setter
		// app.msg = "修改msg！！！"
		
		
		
		// 传统的DOM开发
		/*
		msg = xxx
		document.getElementById("header").innnerHTML = msg
		document.getElementById("main").innnerHTML = msg
		document.getElementById("footer").innnerHTML = msg
		
		document.getElementById("header").innnerHTML
		document.getElementById("main").innnerHTML
		document.getElementById("footer").innnerHTML
		*/
		
		// console.log(Vue)
		
	</script>
</body>
</html>